<template>
  <s-layout
    title="家谱"
    navbar="inner"
    tabbar="/pages/message/genealogy"
    color="#000000"
    :onShareAppMessage="true"
    :leftIcon="''"
    :bgStyle="pageStyle.background"
    :navbarStyle="template.style?.navbar"
    :showFloatButton="true"
    :showLeftHome="false"
    showAddIcon
    main-background="#F5F5F5"
    @openLoginPopup="openLoginPopup"
  >
    <scroll-view scroll-y="true"
                 :style="{
                    height: `calc(100vh - ${scrollView_height}px)`
                 }"
                 @scroll="genealogyScroll"
    >
      <view class="genealogy flex flex-column align-center">
        <image :src="`${IMG_URL}/genealogy/genealogy_icon.png`" class="wh_96 hW_98 mt_25"></image>
        <view class="fs_42 fw_bold color_292929 mt_53">拾亲
          <text class="color_FF4206">快速</text>
          帮您自动生成家谱
        </view>
        <view class="fs_25 fw_500 color_4B4B4B mt_13">电子云家谱 印刷纸质家谱 家风文化墙</view>
        <view class="wh_702 flex align-center justify-between mt_52">
          <view v-for="(item,index) in state.list" :key="index"
                class="flex align-center justify-center wh_164 hW_80 fs_30 fw_500"
                style="background: #FFF8E8;border-radius: 8rpx;border: 1px solid #FAD582;color: #845C05;"
                @click.stop="sheep.$router.go(item.url)"
          >
            {{ item.name }}
          </view>
        </view>
        <!-- 未登录 -->
        <view v-if="genealogyList.length === 0"
              class="genealogy_bg wh_702 hW_636 mt_16 flex"
              style="border-radius: 21rpx;overflow:hidden;position: relative;"
              @click.stop="goGenealogicalDetails()"
        >
          <view class="genealogy_contents flex flex-column align-center flex-sub">
            <view class="z_1 mt_30 flex justify-between"
                  style="width: 100%;"
            >
              <view class="flex flex-column ml_24">
                <view class="fs_38 color_FFFFFF fw_500">{{ '我的家谱' }}</view>
                <view class="fs_22 fw_400 color_FFFFFF mt_15">家谱号: {{ '66666GT' }}</view>
                <view class="fs_22 fw_400 color_FFFFFF mt_15">发起人: {{ '未登录' }}</view>
                <view class="fs_22 fw_400 color_FFFFFF mt_15">
                  创建时间：{{ dayjs(new Date().getTime()).format('YYYY年MM月DD日') }}
                </view>
              </view>
              <view class="flex flex-column align-end mr_24">
                <view class="flex align-center">
                  <!-- #ifndef H5 -->
                  <view class="wh_100 hW_49 fs_25 fw_500 flex align-center justify-center"
                        style="background: rgba(255,255,255,0.8);border-radius: 13rpx;color: #000000;"
                        @click.stop="sweep"
                  >
                    扫一扫
                  </view>
                  <!-- #endif -->
                  <view class="wh_54 hW_49 flex align-center justify-center ml_30"
                        style="border-radius: 13rpx;background: rgba(255,255,255,0.8)"
                        @click.stop="goGenealogicalManagement()"
                  >
                    <image :src="`${IMG_URL}/genealogy/genealogy_code.png`"
                           class="wh_31 hW_31"
                    ></image>
                  </view>
                </view>
                <view class="fs_34 fw_500 color_FFFFFF mt_38" @click.stop="goGenealogicalManagement()">
                  设置
                </view>
              </view>
            </view>
            <view class="wh_179 hW_58 z_10 fs_34 fw_bold flex align-center justify-center"
                  style="background: rgba(255,255,255,0.6);border-radius: 29rpx;color: #0F0F0F;position: absolute;left: 50%;transform: translateX(-50%);bottom: 94rpx;"
            >
              进入家谱
            </view>
            <view class="flex align-center"
                  style="position: absolute;left: 50%;transform: translateX(-50%);bottom: 22rpx"
            >
              <view class="fs_24 fw_500"
                    style="color: rgba(255,255,255,0.8)"
              >
                总人数: {{ 10 }}
              </view>
              <view class="fs_24 fw_500 ml_16 mr_16"
                    style="color: rgba(255,255,255,0.8)"
              >
                男: {{ 5 }}
              </view>
              <view class="fs_24 fw_500"
                    style="color: rgba(255,255,255,0.8)"
              >
                女: {{ 5 }}
              </view>
            </view>
          </view>
        </view>
        <!-- 只有一个家谱 -->
        <view v-else-if="genealogyList.length === 1">
          <view class="genealogy_bg wh_702 hW_636 mt_16 flex"
                style="border-radius: 21rpx;overflow:hidden;position: relative;"
                v-for="(item,index) in genealogyList" :key="index"
                @click.stop="goGenealogicalDetails(item)"
          >
            <view class="genealogy_contents flex flex-column align-center flex-sub">
              <view class="z_1 mt_30 flex justify-between"
                    style="width: 100%;"
              >
                <view class="flex flex-column ml_24">
                  <view class="fs_38 color_FFFFFF fw_500">{{ item.title }}</view>
                  <view class="fs_22 fw_400 color_FFFFFF mt_15">家谱号: {{ item.code }}</view>
                  <view class="fs_22 fw_400 color_FFFFFF mt_15">发起人: {{ item.initiator }}</view>
                  <view class="fs_22 fw_400 color_FFFFFF mt_15">
                    创建时间：{{ dayjs(item.add_time * 1000).format('YYYY年MM月DD日') }}
                  </view>
                </view>
                <view class="flex flex-column align-end mr_24">
                  <view class="flex align-center">
                    <!-- #ifndef H5 -->
                    <view class="wh_100 hW_49 fs_25 fw_500 flex align-center justify-center"
                          style="background: rgba(255,255,255,0.8);border-radius: 13rpx;color: #000000;"
                          @click.stop="sweep"
                    >
                      扫一扫
                    </view>
                    <!-- #endif -->
                    <view class="wh_54 hW_49 flex align-center justify-center ml_30"
                          style="border-radius: 13rpx;background: rgba(255,255,255,0.8)"
                          @click.stop="goGenealogicalManagement(item.id,true)"
                    >
                      <image :src="`${IMG_URL}/genealogy/genealogy_code.png`"
                             class="wh_31 hW_31"
                      ></image>
                    </view>
                  </view>
                  <view class="fs_34 fw_500 color_FFFFFF mt_38" @click.stop="goGenealogicalManagement(item.id)">
                    设置
                  </view>
                </view>
              </view>
              <view class="wh_179 hW_58 z_10 fs_34 fw_bold flex align-center justify-center"
                    style="background: rgba(255,255,255,0.6);border-radius: 29rpx;color: #0F0F0F;position: absolute;left: 50%;transform: translateX(-50%);bottom: 94rpx;"
              >
                进入家谱
              </view>
              <view class="flex align-center"
                    style="position: absolute;left: 50%;transform: translateX(-50%);bottom: 22rpx"
              >
                <view class="fs_24 fw_500"
                      style="color: rgba(255,255,255,0.8)"
                >
                  总人数: {{ item.total_count }}
                </view>
                <view class="fs_24 fw_500 ml_16 mr_16"
                      style="color: rgba(255,255,255,0.8)"
                >
                  男: {{ item.man_count }}
                </view>
                <view class="fs_24 fw_500"
                      style="color: rgba(255,255,255,0.8)"
                >
                  女: {{ item.women_count }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 拥有多个家谱 -->
        <view v-else>
          <view class="genealogy_bg wh_702 hW_374 mt_16 flex"
                style="border-radius: 21rpx;overflow:hidden;position: relative;"
                v-for="(item,index) in genealogyList" :key="index"
                @click.stop="goGenealogicalDetails(item)"
                @touchstart="longpress"
                @touchend="touchend"
          >
            <view class="genealogy_content flex flex-column align-center flex-sub">
              <view class="z_1 mt_30 flex justify-between"
                    style="width: 100%;"
              >
                <view class="flex flex-column ml_24">
                  <view class="fs_38 color_FFFFFF fw_500">{{ item.title }}</view>
                  <view class="fs_22 fw_400 color_FFFFFF mt_15">家谱号: {{ item.code }}</view>
                  <view class="fs_22 fw_400 color_FFFFFF mt_15">发起人: {{ item.initiator }}</view>
                  <view class="fs_22 fw_400 color_FFFFFF mt_15">
                    创建时间：{{ dayjs(item.add_time * 1000).format('YYYY年MM月DD日') }}
                  </view>
                </view>
                <view class="flex flex-column align-end mr_24">
                  <view class="flex align-center">
                    <!-- #ifndef H5 -->
                    <view class="wh_100 hW_49 fs_25 fw_500 flex align-center justify-center"
                          style="background: rgba(255,255,255,0.8);border-radius: 13rpx;color: #000000;"
                          @click.stop="sweep"
                    >
                      扫一扫
                    </view>
                    <!-- #endif -->
                    <view class="wh_54 hW_49 flex align-center justify-center ml_30"
                          style="border-radius: 13rpx;background: rgba(255,255,255,0.8)"
                          @click.stop="goGenealogicalManagement(item.id,true)"
                    >
                      <image :src="`${IMG_URL}/genealogy/genealogy_code.png`"
                             class="wh_31 hW_31"
                      ></image>
                    </view>
                  </view>
                  <view class="fs_34 fw_500 color_FFFFFF mt_38" @click.stop="goGenealogicalManagement(item.id)">
                    设置
                  </view>
                </view>
              </view>
              <view style="width: 100%;" class="ml_50 mt_15">
                <view class="wh_145 hW_49 z_10 fs_28 fw_500 flex align-center justify-center"
                      style="background: rgba(255,255,255,0.6);border-radius: 29rpx;color: #0F0F0F;"
                >
                  进入家谱
                </view>
              </view>
              <view class="flex align-center"
                    style="position: absolute;left: 24rpx;bottom: 22rpx"
              >
                <view class="fs_24 fw_500"
                      style="color: rgba(255,255,255,0.8)"
                >
                  总人数: {{ item.total_count }}
                </view>
                <view class="fs_24 fw_500 ml_16 mr_16"
                      style="color: rgba(255,255,255,0.8)"
                >
                  男: {{ item.man_count }}
                </view>
                <view class="fs_24 fw_500"
                      style="color: rgba(255,255,255,0.8)"
                >
                  女: {{ item.women_count }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="flex align-center fs_22 fw_500 color_696969 mt_40 mb_40">
          <view class="mr_30" @click.stop="newFamilyTree">新建家谱</view>
          <view class="ml_30" @click.stop="joinFamilyTree">加入家谱</view>
        </view>
      </view>
    </scroll-view>

    <s-login-popup ref="loginPopup" @confirm="loginConfirm" @openPopup="openPopup"></s-login-popup>

    <!-- 家庭消息申请类型弹窗 -->
    <s-apply-family-member-ship @agreeToJoin="agreeToJoin"
                                @toggle="agreeToJoin"
    >
    </s-apply-family-member-ship>
    <!-- 家庭消息邀请类型弹窗 -->
    <s-apply-family-invitation :list="page.list"
                               @agreeToJoin="agreeToJoin"
                               @toggle="agreeToJoin"
    >
    </s-apply-family-invitation>

    <!-- 会员开通 -->
    <view v-if="state.featured && !is_vip"
          class="flex flex-column align-center"
          style="position: fixed;top: 160rpx;right:24rpx;"
          @click.stop="goVip"
    >
      <image :src="`${IMG_URL}/genealogy/genealogy_vip.png`"
             class="wh_117 hW_104"
      ></image>
      <image :src="`${IMG_URL}/genealogy/genealogy_close.png`"
             class="wh_31 hW_31"
             @click.stop="state.featured = false"
      ></image>
    </view>
  </s-layout>
</template>

<script setup>
  // 隐藏原生tabBar
  import SApplyFamilyInvitation from '@/sheep/components/s-apply-family-invitation/s-apply-family-invitation.vue';

  uni.hideTabBar({
    fail: () => {
    },
  });

  import sheep from '@/sheep';
  import { computed, reactive, onMounted, ref,nextTick } from 'vue';
  import dayjs from 'dayjs';
  import SLoginPopup from '@/sheep/components/s-login-popup/s-login-popup.vue';
  import { onLoad, onShow, onReady } from '@dcloudio/uni-app';

  const pageStyle = reactive({
    background: { color: '#F5F5F5', src: '' },
  });
  const template = computed(() => sheep.$store('app').template.user);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  // 家谱列表
  const genealogyList = computed(() => sheep.$store('family').genealogyList);
  const loginPopup = ref();
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const scrollView_height = computed(() => {
    let height = 0;
    height = Number(sheep.$platform.device.statusBarHeight) + Number(sheep.$store('system_info').tabbar_height) + 44;
    return height;
  });
  const bind_id = computed(() => sheep.$store('AI').bind_id);
  const bind_family_id = computed(() => sheep.$store('AI').bind_family_id);
  const is_vip = computed(() => !!sheep.$store('user').userInfo.vip_end_time && new Date().getTime() / 1000 < sheep.$store('user').userInfo.vip_end_time);
  // #ifdef H5
  const userInfo = computed(() => JSON.parse(uni.getStorageSync('user-store')).userInfo);
  // #endif
  // #ifndef H5
  const userInfo = computed(() => sheep.$store('user').userInfo);
  // #endif
  const state = reactive({
    list: [
      {
        name: '中华姓氏',
        url: '/pages/chineseSurname/index',
      },
      {
        name: '寻根拜祖',
        url: '/pages/chineseSurname/index?index=1',
      },
      {
        name: '老黄历',
        url: '/pages/chineseSurname/index?index=5',
      },
      {
        name: '今日运势',
        url: '/pages/familyPage/anniversariesList?is_flag=2&index=2',
      },
    ],
    // 是否长按
    is_longpress: false,
    // 长按时间
    longpress_time: null,
    featured: true,
    // 是否打开弹窗
    is_open: false,
  });
  const page = reactive({
    list: [],
  });

  uni.$on('openLoginPopup', () => {
    loginPopup._value.openPopup();
  });

  function openLoginPopup() {
    loginPopup._value.openPopup();
  }

  uni.$on('closeLoginPopup', () => {
    if (state.is_open) {
      loginPopup._value.closePopup();
      state.is_open = false;
    }
  });

  function openPopup() {
    state.is_open = true;
  }

  onLoad(async (options) => {
    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('&');
      for (let i = 0; i < sceneParams.length; i++) {
        options[sceneParams[i].split('=')[0]] = sceneParams[i].split('=')[1];
      }
    }
    // #endif

    if (!!options.id) {
      sheep.$store('AI').setBindId(options.id);
    }

    if (!!options.spid) {
      sheep.$store('AI').setBindId(options.spid);
    }

    if (!!options.fd) {
      if (!isLogin.value) {
        page.list.uid = options.spid;
        page.list.family_id = options.fd;
        page.list.type = 'family';
      } else {
        const { data } = await sheep.$api.family.checkUserInFamily({ family_id: options.fd });
        if (data.is_join != 1) {
          page.list.uid = options.spid;
          page.list.family_id = options.fd;
          page.list.type = 'family';
        }
      }
    }

    if (!!options.gd) {
      if (!isLogin.value) {
        page.list.uid = options.spid;
        page.list.genealogy_id = options.gd;
        page.list.type = 'genealogy';
      } else {
        const { data } = await sheep.$api.genealogy.checkUserInGenealogy({ genealogy_id: options.gd });
        if (data.is_join != 1) {
          page.list.uid = options.spid;
          page.list.genealogy_id = options.gd;
          page.list.type = 'genealogy';
        }
      }
    }

    console.log('page.list=>', page.list);

    if (!!isLogin.value) {
      sheep.$store('user').updateUserData();
    }
  });

  onReady(() => {
    nextTick(()=>{
      // #ifndef H5
      if (!!isLogin.value) {
        if (!userInfo.value.surname || !userInfo.value.daimyo) {
          uni.redirectTo({
            url: '/pages/userData/sex',
          });
          return;
        }
      }
      // #endif
      // #ifdef H5
      if (!!isLogin.value) {
        console.log(userInfo.value);
        if (!userInfo.value.surname || !userInfo.value.daimyo) {
          uni.redirectTo({
            url: '/pages/userData/sex',
          });
          return;
        }
      }
      // #endif
    })
  });

  onShow(async () => {
    if (!!bind_id.value && !!isLogin.value) {
      const { code } = await sheep.$api.user.bindParent({ parent_id: bind_id.value });
      if (code == 1) {
        sheep.$store('AI').setBindId('');
      }
    }
    if (!!bind_family_id.value && !!isLogin.value) {
      const { code } = await sheep.$api.family.applyFamily({ family_id: bind_family_id.value });
      if (code == 1) {
        sheep.$store('AI').setBindFamilyId('');
      }
    }
    if (!!isLogin.value) {
      await sheep.$store('family').getList();
      await sheep.$store('family').getFamilyTree();
      await sheep.$store('family').getFamilyRemindList();
    }
  });


  // onMounted(async () => {
  //   // 获取家谱列表
  //   if (!!isLogin.value) {
  //     sheep.$store('family').getFamilyTree();
  //   }
  // });


  // 跳转家谱详情
  async function goGenealogicalDetails(info = {}) {
    if (!!state.is_longpress) {
      return;
    }
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    await uni.showLoading({
      title: '加载中...',
      mask: true,
    });
    sheep.$router.go('/pages/genealogy/management', {
      id: info.id,
      name: info.title,
      add_time: info.add_time,
      username: info.initiator,
    });
    await uni.hideLoading();
  }

  function longpress() {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    state.longpress_time = setTimeout(() => {
      sheep.$router.go('/pages/family/genealogicalList');
    }, 2000);
    state.is_longpress = true;
  }

  // 滑动取消长按
  function genealogyScroll() {
    touchend();
  }

  // 取消长按
  function touchend() {
    clearTimeout(state.longpress_time);
    state.is_longpress = false;
  }

  function loginConfirm() {
    loginPopup._value.closePopup();
    // #ifdef MP-WEIXIN
    // sheep.$router.go('/pages/login/wechat_login');
    uni.navigateTo({
      url: '/pages/login/wechat_login',
    });
    // #endif
    // #ifndef MP-WEIXIN
    sheep.$router.go('/pages/login/phoneLogin');
    // #endif
  }

  function goGenealogicalManagement(id = 0, is_flag = false) {
    if (!isLogin.value) {
      loginPopup.value.openPopup();
      return;
    }
    sheep.$router.go('/pages/genealogy/genealogicalManagement', { id, is_flag });
  }

  // 新建家谱
  function newFamilyTree() {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    sheep.$router.go('/pages/genealogy/newFamilyTree');
  }

  // 加入家谱
  function joinFamilyTree() {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    sheep.$router.go('/pages/genealogy/joinFamilyTree');
  }

  async function agreeToJoin() {
    await sheep.$store('family').getList();
    await sheep.$store('family').getFamilyTree();
    await sheep.$store('family').getFamilyRemindList();
  }

  function sweep() {
    // #ifdef APP-PLUS
    if (sheep.$platform.device.platform.toLocaleLowerCase() == 'ios') {
      uni.scanCode({
        success: (res) => {
          // showAuthModal('addFriend');
        },
      });
    } else {
      let res = plus.navigator.checkPermission('android.permission.CAMERA');
      if (res == 'authorized') {
        uni.scanCode({
          success: (res) => {
            console.log('获取到的信息=>', res);
            if (res.scanType == 'QR_CODE') {
              const result = res.result.split('?')[1];
              const qrcode = result.split('=')[1];
              uni.showModal({
                title: '授权登录',
                content: '是否授权登录',
                success: async (modal) => {
                  if (modal.confirm) {
                    const { code, msg } = await sheep.$api.user.userLogin({
                      qr_code: qrcode,
                      username: sheep.$store('user').userInfo.mobile,
                    });
                    if (code == 1) {
                      sheep.$helper.toast('授权成功');
                    } else {
                      sheep.$helper.toast(msg);
                    }
                  }
                },
              });
            }
          },
        });
      } else {
        uni.showModal({
          title: '开启相机权限',
          content: '你还没有开启相机权限，无法使用拾亲扫描功能、拍照或录制视频功能',
          success: async (res) => {
            if (res.confirm) {
              if (sheep.$platform.device.platform.toLocaleLowerCase() == 'ios') {
                let limitsOfAuthority = await permision.judgeIosPermission('android.permission.CAMERA');
                if (limitsOfAuthority == 1) {
                  uni.scanCode({
                    success: (res) => {
                      // showAuthModal('addFriend');
                    },
                  });
                } else if (limitsOfAuthority == 0) {
                  uni.showModal({
                    title: '开启相机权限',
                    content: '你还没有开启相机权限，无法使用拾亲扫描功能、拍照或录制视频功能',
                    success: async (res) => {
                      if (res.confirm) {
                        permision.gotoAppPermissionSetting();
                      }
                    },
                  });
                } else {
                  uni.showModal({
                    title: '开启相机权限',
                    content: '你还没有开启相机权限，无法使用拾亲扫描功能、拍照或录制视频功能',
                    success: async (res) => {
                      if (res.confirm) {
                        permision.gotoAppPermissionSetting();
                      }
                    },
                  });
                }
              } else {
                let limitsOfAuthority = await permision.requestAndroidPermission('android.permission.CAMERA');
                if (limitsOfAuthority == 1) {
                  uni.scanCode({
                    success: (res) => {
                      // showAuthModal('addFriend');
                    },
                  });
                } else if (limitsOfAuthority == 0) {
                  uni.showModal({
                    title: '开启相机权限',
                    content: '你还没有开启相机权限，无法使用拾亲扫描功能、拍照或录制视频功能',
                    success: async (res) => {
                      if (res.confirm) {
                        permision.gotoAppPermissionSetting();
                      }
                    },
                  });
                } else {
                  uni.showModal({
                    title: '开启相机权限',
                    content: '你还没有开启相机权限，无法使用拾亲扫描功能、拍照或录制视频功能',
                    success: async (res) => {
                      if (res.confirm) {
                        permision.gotoAppPermissionSetting();
                      }
                    },
                  });
                }
              }
            }
          },
        });
      }
    }
    // #endif
    // #ifdef MP-WEIXIN
    uni.scanCode({
      success: async (res) => {
        console.log('获取到的信息=>', res);
        // showAuthModal('addFriend');
        if (res.scanType == 'QR_CODE') {
          const result = res.result.split('?')[1];
          const qrcode = result.split('=')[1];
          uni.showModal({
            title: '授权登录',
            content: '是否授权登录',
            success: async (modal) => {
              if (modal.confirm) {
                const { code, msg } = await sheep.$api.user.userLogin({
                  qr_code: qrcode,
                  username: sheep.$store('user').userInfo.mobile,
                });
                if (code == 1) {
                  sheep.$helper.toast('授权成功');
                } else {
                  sheep.$helper.toast(msg);
                }
              }
            },
          });
        }
      },
    });
    // #endif
  }

  async function goVip() {
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    const { data } = await sheep.$api.goods.ids({ ids: '10' });
    let obj = {};
    let arr = [];
    arr.push({
      goods_id: data[0].id,
      goods_num: 1,
      goods_sku_price_id: data[0].id,
    });
    obj.goods_list = arr;
    obj.is_from = 1;
    obj.order_type = 'goods';
    const res = await sheep.$api.order.create(obj);
    uni.redirectTo({
      url: `/pages/pay/index?orderSN=${res.data.order_sn}&flag=1`,
    });
  }
</script>


<style scoped lang="scss">
  .genealogy_bg {
    background: url($uni-bg-url-sq + '/genealogy/genealogy_background.png') no-repeat;
    background-size: 100% 100%;
  }

  .genealogy_contents {
    background: url($uni-bg-url-sq + '/genealogy/genealogy_shu.png') 140rpx 193rpx no-repeat;
    background-size: 342rpx 286rpx;
    height: 100%;
  }

  .genealogy_content {
    background: url($uni-bg-url-sq + '/genealogy/genealogy_shu.png') 329rpx 110rpx no-repeat;
    background-size: 254rpx 213rpx;
    height: 100%;
  }
</style>
